<template>
	<!-- 搜索 -->
	<view class="page">
		<view class="section bac-color-f4">
			<view class="flex align-center text-center">
				<icon :type="'search'" size="22" />
				<view class="flex-1 search-input">
					<input type="text" placeholder="搜索关键词" v-model="search_q" @confirm="doSearch"/>
				</view>
			</view>
		</view>

		<view class="section" v-if="history_q && history_q.length>0">
			<view class="his-search">
				<view class="font-size-17 flex text-middle align-center">
					<text class="flex-1">历史搜索</text>
					<text class="font-size-13 font-color-666 pad-l-10 pad-r-10" @click="clearHistory">清除历史</text>
				</view>
				<view class="mar-t-15">
					<view class="his-item" v-for="(h,i) in history_q" :key="i" @click="doHisSearch(h)">
						<text>{{h}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="text-center mar-t-40 font-color-999 font-size-14" v-if="more">暂无结果</view>
		<!-- <view class="section">
			<view class="hot-search">
				<view class="font-size-17">
					<text>热门搜索</text>
				</view>
				<view class="mar-t-15">
					<view class="hot-item">
						<text>2019年</text>
					</view>
					<view class="hot-item">
						<text>2019年</text>
					</view>
				</view>
			</view>
		</view>-->
	</view>
</template>

<script>
import { search } from '@/utils/http'
export default {
	data() {
		return {
			search_q: '', //搜索关键词
			history_q: [],
			more: false
		}
	},

	methods: {
		doSearch() {
			if (this.search_q) {
				let index = this.history_q.indexOf(this.search_q) //判断是否在搜索历史中
				if (index >= 0) {
					this.history_q.splice(index, 1)
				}
				this.history_q.unshift(this.search_q)
				uni.setStorageSync('history_q', this.history_q)
				this.more = false
				search({ q: this.search_q }).then(res => {
					if (res) {
						this.href(
							'/pages/search/info?q=' +
								this.search_q +
								'&activity_num=' +
								res.activity +
								'&counselor_num=' +
								res.counselor +
								'&edu_num=' +
								res.edu
						)
					} else {
						this.more = true
					}
				})
			} else {
				this.errorToShow('请输入搜索内容')
			}
		},
		clearHistory() {
			this.history_q = []
			uni.setStorageSync('history_q', [])
		},
		doHisSearch(h) {
			this.search_q = h
			this.doSearch()
		}
		//初始化数据
	},
	onLoad() {
		let history_q = uni.getStorageSync('history_q')
		if (history_q) {
			this.history_q = history_q
		}
	}
}
</script>

<style scoped>
.header-top {
	padding: 15px 10px;
}
.header-top .active {
	font-weight: bold;
	color: #0088ff !important;
}
.section {
	padding: 10px 12px;
}
.search-input {
	background-color: #ffffff;
	text-align: left;
	margin-left: 15px;
	padding: 5px;
}
.search-input input {
	border-radius: 5px;
}
.his-search .his-item,
.hot-search .hot-item {
	display: inline-block;
	padding: 6px 8px;
	margin-right: 8px;
	background-color: #f6f6f6;
	border-radius: 3px;
	color: #222222;
}
</style>